<template>
  <div>
    <Form :label-width="85">
      <Row :gutter="20" class="code-row-bg" v-for="item in items" :key="item.langCode">
        <Col span="24">
          <Form-item :label="item.langDesc ">
            <Input v-model="item.vsiValue" />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import valueSet from "@lang/modules/valueSet";
import valueSetAPI from "@/api/valueSetAPI.js";

export default {
  components: {},
  props: {
    vsiId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  locales: {
    "zh-CN": {
      module: {
        valueSet: valueSet["zh-CN"]
      }
    },
    "en-US": {
      module: {
        valueSet: valueSet["en-US"]
      }
    }
  },
  created: function() {
    this.init();
    this.$emit("SetPageWidth", 400);
    this.$emit("SetTitle", this.$t("module.valueSet.globalNameEdit"));
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        // icon: "save",
        handle: this.updateNameLang
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  mounted: function() {},
  data() {
    return {
      items: [],
      languageList: {}
    };
  },
  computed: {},

  beforeMount: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    async init() {
      const [{ data: itemData }, langData] = await Promise.all([this.getValueNameInfo(), this.getLanguageList()]);
      langData.forEach(lang => {
        this.languageList[lang.vsiKey] = lang.vsiValue;
      });
      for (const key in itemData) {
        this.items.push({
          vsiId: this.vsiId,
          langCode: itemData[key].langCode,
          langDesc: this.languageList[itemData[key].langCode],
          vsiValue: itemData[key].vsiValue,
          version: itemData[key].version
        });
      }
    },
    getValueNameInfo() {
      return $http.get(`${window.RPConfig.setting}/valueset/item/lang/list?vsiId=${this.vsiId}`);
    },
    getLanguageList() {
      return valueSetAPI.getValueSetByCode("languageList");
    },
    updateNameLang() {
      $http.post(`${window.RPConfig.setting}/valueset/value/lang/update`, this.items).then(() => {
        this.$message.success({
          content: this.$t("module.valueSet.updateNameSuccessfully"),
          duration: 3
        });
        this.$emit("Close", this.items || []);
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
